<template>
  <div id="myChart" style="width: 90%; height: 90%"></div>
</template>

<script>
export default {
  data() {
    return {};
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      var chartDom = document.getElementById("myChart");
      var myChart = this.$echarts.init(chartDom);
      var option = {
        title: {
          text: "仓库容量",
          left: "left",
          fontSize: "18px",
          fontWeight: "800",
        },
        grid: {
          left: "0%", //图表距离容器左侧多少距离
          right: "40%", //图表距离容器右侧侧多少距离
          bottom: "3%", //图表距离容器上面多少距离
          top: 200, //图表距离容器下面多少距离
        },

        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },

        series: [
          {
            name: "",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "60%"], //饼图位置
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },

            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
                color: "black",
              },
              itemStyle: {
                color: "#58a55c",
              },
            },
            labelLine: {
              show: true,
            },
            data: [
              { value: 7120, name: "未使用", itemStyle: { color: "#e8e8e8" } },
              { value: 3030, name: "已使用", itemStyle: { color: "#5087ec" } },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped></style>
